<template>
	<view class="content">
		<!-- 		<view class="shurk">
			<view class="kuang">
				<image src="../../static/zhengshu/2661.png" mode=""></image>
				<input type="text" placeholder="请输入关键词搜索" />
			</view>
		</view> -->
		<view class="aptext">
			<view class="information">
				<view class="dange" v-for="item,index in news" @click="goDetails(item)" :key="index">
					<image :src="url +item.image.split(',')[0]" mode=""></image>
					<view class="wenben">
						<view class="titke">
							<text class="hongs"> 最新发布 </text>
							<text class="neir">
								{{item.shotMsg}}
							</text>
						</view>
						<view class="fenlie">
							<view class="danage">
								{{item.city}}
							</view>
						</view>
						<view class="jiaqian">
							<view class="price">
								<text>￥</text>
								{{item.officialContactPrice}}
							</view>
							<view class="lilna">
								{{item.viewers}}浏览
							</view>
							<view class="lianx">
								{{item.contacts}}人联系
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="dangchukuan" v-show="denglumtk">
		<view class="neirdeli">
			<view class="titlebiaoti"> 您还未登录,请先登录！ </view>
			<view class="qianqudenglu">
				<button class="getphonebtn" @click="danchukuan"> 关闭</button>
				<button class="getphonebtn" open-type="getPhoneNumber" @getphonenumber="bindGetUserInfo">
					微信快捷登录</button>
				<!-- <button class="getphonebtn" v-if="!wx" @click="bindGetUserInfo"> 微信快捷登录</button> -->
			</view>
			<view class="xiamian">
				<view class="yuedu">
					<image src="../../static/unaquna.png" v-if="duihao" mode="" @click="duihaa"></image>
					<image src="../../static/duihao.png" v-if="yuanqunaduig" mode="" @click="duihab"></image>
				</view>
				<view class="zhiti"> 我已阅读并同意 <view class="yogh" @click="handleOpenPrivacyContract"> 用户隐私协议、 </view>
					<view class="yiexsi" @click="handleOpenPrivacyContract"> 隐私协议 </view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		OFFICIAL,
		viewerAdd,
		newsa,
		newgetOpenId,
	} from "../../request/api.js"
	export default {
		data() {
			return {
				duihao: true,
				yuanqunaduig: false,
				denglumtk: false, //前去登录模态框
				modalShow: false,
				url: '',
				news: [],
				pageNo: 1,
				total: '',
				id: ''
			}
		},
		onReachBottom() {
			console.log(111);
			if (this.total <= this.news.length) {
				uni.showToast({
					title: '已加载全部数据',
					icon: "none"
				});
			} else {
				this.pageNo++;
				this.felri()
			}
		},
		onLoad(ops) {
			console.log(ops.id);
			this.id = ops.id
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = uni.getStorageSync('userInfo')
			} else {}
			this.url = getApp().globalData.url + '/'
		},
		onShow() {
			this.news = []
			this.felri()
		},
		methods: {
			bindGetUserInfo(e) {
				let that = this;
				if (that.yuanqunaduig === false) {
					wx.showToast({
						title: '请勾选用户隐私协议、隐私协议',
						icon: 'none'
					});
					return;
				}
				// #ifdef APP
				uni.navigateTo({
					url: "./Sign"
				})
				// #endif
				// #ifdef MP-WEIXIN
				if (e.detail.errMsg != 'getPhoneNumber:ok') {
					wx.showToast({
						title: '您拒绝了授权',
						icon: 'none'
					});
					return;
				}
				console.log(e);
				that.jiamiinfo = e.detail;
				that.loginsa();
				// #endif
			},
			loginsa() {
				let that = this
				wx.showLoading({
					title: '登录中',
				})
				uni.login({
					success: res => {
						console.log(res, 'jjjj')
						newgetOpenId({
							code: res.code,
							data: that.jiamiinfo.encryptedData,
							iv: that.jiamiinfo.iv,
						}).then(responts => {
							console.log(responts);
							const infos = responts.result;
							if (responts.success) {
								uni.hideLoading()
								that.userInfo = responts.result.memberInfo
								uni.setStorageSync('userInfo', JSON.stringify(infos.memberInfo));
								uni.setStorageSync('token', infos.token);
								that.denglumtk = false
							} else {
								uni.hideLoading()
								uni.showToast({
									title: responts.message,
									icon: 'none'
								});
							}
						})
					}
				})
			},
			duihaa() {
				this.duihao = false
				this.yuanqunaduig = true
			},
			duihab() {
				this.yuanqunaduig = false
				this.duihao = true
			},
			closeModal() {
				this.modalShow = false
				this.getLoginType()
			},
			goDetails(e) {
				// if (!uni.getStorageSync('userInfo')) {
				// 	this.denglumtk = true //前去登录模态框 = true
				// 	return;
				// }
				// viewerAdd(e.id).then(res => {})
				uni.navigateTo({
					url: '../details/index?detalis=' + JSON.stringify(e)
				})
			},
			felri() {
				uni.showLoading({
					title: '加载中',
				})
				if (this.id == 'OFFICIAL') {
					OFFICIAL({
						pageNo: this.pageNo,
					}).then(res => {
						console.log(res, '官方直推');
						this.news = this.news.concat(res.result.records)
						this.total = res.result.total; //数据总条数
						uni.hideLoading()
					})
				} else {
					newsa({
						categoryId: this.id,
						pageNo: this.pageNo,
					}).then(res => {
						if (res.success) {
							this.news = this.news.concat(res.result.records)
							this.total = res.result.total; //数据总条数
						}
						uni.hideLoading()
					})
				}
			},
		}
	}
</script>
<style scoped lang="less">
	.topstart {
		height: var(--status-bar-height);
	}

	.ceshai {
		// height: 375rpx;
		// background: linear-gradient(22deg, #FAFAFA 0%, #FBE6E2 100%);
	}

	.header {
		margin-top: 30rpx;
		// text-align: center;
		color: #170000;
		font-size: 36rpx;
		display: flex;
		align-items: center;
		margin-bottom: 50rpx;

		// margin-bottom: 0rpx;
		.hui {
			// margin-right: 240rpx;
			margin-left: 30rpx;

			xuan {
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.information {
		width: 702rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.dange {
			width: 345rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			image {
				width: 345rpx;
				border-radius: 20rpx;
				height: 345rpx;
			}

			.wenben {
				width: 345rpx;
				padding: 13rpx 16rpx 35rpx;
				box-sizing: border-box;

				.titke {
					display: -webkit-box;
					/* 使用弹性盒子布局模型 */
					-webkit-box-orient: vertical;
					/* 垂直排列子元素 */
					-webkit-line-clamp: 2;
					/* 限制在三行 */
					overflow: hidden;
					/* 隐藏溢出的内容 */
					text-overflow: ellipsis;

					/* 使用省略号表示文本溢出 */
					.hongs {
						margin-right: 10rpx;
						width: 118.91rpx;
						height: 40.31rpx;
						border-radius: 16rpx;
						background: #feecea;
						text-align: left;
						font-size: 24rpx;
						color: #f8492e;
						padding: 5rpx 10rpx;
					}

					.neir {
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						font-style: normal;
						text-transform: none;
					}
				}

				.fenlie {
					display: flex;
					justify-content: space-between;
					margin-top: 23rpx;
					margin-bottom: 23rpx;

					.danage {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						font-style: normal;
						text-transform: none;
					}
				}

				.jiaqian {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.hongs {
						display: flex;
						align-items: flex-end;

						.kiar {
							font-weight: 500;
							font-size: 20rpx;
							color: #F8492E;
							font-style: normal;
							text-transform: none;
						}

						.qina {
							font-weight: 500;
							font-size: 32rpx;
							color: #F8492E;
							font-style: normal;
							text-transform: none;
						}
					}

					.lilna {
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						font-style: normal;
						text-transform: none;
					}

					.lianx {
						font-weight: 400;
						font-size: 20rpx;
						color: #AAAAAA;
						font-style: normal;
						text-transform: none;
						margin-right: 14rpx;
					}
				}
			}
		}
	}

	.zhngef {
		width: 702rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;

		.yi {
			width: 320rpx;
			height: 280rpx;
			background: linear-gradient(140deg, #FFEDEB 0%, #F8492E 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;
			padding: 52rpx 18rpx 13rpx;
			box-sizing: border-box;

			.niyoay {
				width: 124rpx;
				height: 124rpx;
				position: absolute;
				top: 30rpx;
				right: 20rpx;
			}

			.guan {
				color: #550D02;
				font-size: 36rpx;
				margin-bottom: 30rpx;
			}

			.nei {
				width: 296rpx;
				height: 137rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 29rpx 19rpx;
				box-sizing: border-box;

				.meit {
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					image {
						width: 18.2rpx;
						height: 13rpx;
						margin-right: 12rpx;
					}
				}
			}
		}

		.er {
			width: 366rpx;
			height: 280rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 1rpx solid #000000;
			padding: 20rpx 16rpx;
			box-sizing: border-box;

			.tou {
				display: flex;
				justify-content: space-between;

				.goggao {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
				}

				.gngd {
					display: flex;
					align-items: center;

					.zih {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						font-style: normal;
						text-transform: none;
					}

					image {
						width: 9rpx;
						height: 17rpx;
						margin-left: 10rpx;
					}
				}
			}

			.huod {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				font-style: normal;
				text-transform: none;
				margin-top: 19rpx;
				margin-bottom: 16rpx;
			}

			.nier {
				.liebiao {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
					margin-top: 8rpx;
				}
			}
		}
	}

	.fenlei {
		.qiuan {
			width: 702rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			margin-bottom: 34rpx;

			.dange {
				width: 88rpx;
				text-align: center;

				.inma {
					width: 88rpx;
					height: 88rpx;

					image {
						width: 88rpx;
						height: 88rpx;
					}
				}

				.title {
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
					margin-top: 15rpx;
				}
			}
		}
	}

	.shurk {
		width: 702rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 65rpx 65rpx 65rpx 65rpx;
		border: 1rpx solid #000000;
		padding-left: 40rpx;
		box-sizing: border-box;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;

		.kuang {
			display: flex;
			align-items: center;

			image {
				width: 29rpx;
				height: 29rpx;
				margin-right: 20rpx;
			}
		}
	}

	.content {}

	.tap {
		width: 702rpx;
		margin: 0 auto;
	}

	// .aptext {
	// 	margin-top: 20rpx;
	// }
	.wodedd {
		margin-left: 24rpx;
		width: 702rpx;
		height: 80rpx;
		display: flex;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		justify-content: space-around;
		background-color: #ffffff;
		margin-top: 20rpx;

		.qbsghui {
			width: 150rpx;
			height: 64rpx;
			background: #ffffff;
			font-weight: 400;
			font-size: 28rpx;
			color: #000;
			align-items: center;
			text-align: center;
			line-height: 64rpx;
		}

		.qbsg {
			width: 150rpx;
			height: 64rpx;
			background: #F8492E;
			border-radius: 65rpx 65rpx 65rpx 65rpx;
			color: #f8f8f8;
			font-size: 28rpx;
			align-items: center;
			text-align: center;
			line-height: 64rpx;
			background: #F8492E;
		}
	}

	.atest {
		width: 702rpx;
		// height: 612rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 32rpx 20rpx 40rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		background-color: #ffffff;

		.atestimg {
			display: flex;
			justify-content: space-between;

			image {
				width: 320rpx;
				height: 230rpx;
			}
		}

		.atesttete {
			margin-top: 20rpx;
			width: 662rpx;
			margin-bottom: 32rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 36rpx;
			font-style: normal;
			text-transform: none;
		}

		.aptextguan {
			display: flex;
			align-items: center;

			.gjc {
				margin-right: 20rpx;
			}

			.chiguan {
				display: flex;

				text {
					padding-left: 20rpx;
					padding-right: 20rpx;
					height: 48rpx;
					background: #FFFFFF;
					line-height: 48rpx;
					border-radius: 45rpx 45rpx 45rpx 45rpx;
					border: 1rpx solid #707070;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
					margin-right: 30rpx;
				}
			}
		}

		.aeeawei {
			display: flex;
			justify-content: space-between;
			margin-top: 32rpx;

			.zou {
				.shijian {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
					margin-bottom: 10rpx;
				}

				.lanlian {
					display: flex;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;

					.liulan {
						margin-right: 40rpx;
					}
				}
			}

			.you {
				width: 200rpx;
				height: 72rpx;
				background: #F8492E;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FDFFFF;
				line-height: 72rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.dangchukuan {
		// opacity: 0.7;
		position: fixed;
		left: 50%;
		top: 50%;
		// transform: translate(-50%, -50%);
		z-index: 99999;

		.neirdeli {
			width: 700rpx;
			height: 500rpx;
			background-color: #FAFAFA;
			margin: 0 auto;
			// margin-top: 400rpx;
			position: absolute;
			// left: 0;
			// top: 0;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: 20rpx;
			padding-bottom: 34rpx;
			box-sizing: border-box;
		}

		.titlebiaoti {
			width: 700rpx;
			height: 200rpx;
			text-align: center;
			font-size: 43rpx;
			line-height: 300rpx;
			// border-bottom: 2rpx solid #55ff00;
		}

		.qianqudenglu {
			width: 700rpx;
			height: 200rpx;
			text-align: center;
			display: flex;
			line-height: 200rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			border-radius: 20rpx;
		}
	}

	.xiamian {
		width: 700rpx;
		height: 100rpx;
		text-align: center;
		display: flex;
		line-height: 200rpx;
		color: #000000;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		padding-left: 34rpx;
		box-sizing: border-box;
	}

	.zhiti {
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-left: 4rpx;
		font-size: 24rpx;
	}

	.yuedu {
		// width: 54rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		line-height: 100rpx;
	}

	.yuedu image {
		width: 30rpx;
		height: 30rpx;
	}

	.yogh {
		color: #94e75d;
	}

	.yiexsi {
		color: #94e75d;
	}

	.getphonebtn {
		// width: 100%;
		// height: 100%;
		width: 300rpx;
		height: 100rpx;
		background-color: #ff5d3d;
		// margin-top: 30rpx;
		font-size: 30rpx;
		display: flex;
		color: #FFFFFF;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
		border: 1rpx solid #eee;
	}
</style>